<template>
  <div class="icon-picker">
    <el-input
      v-model="searchKeyword"
      placeholder="搜索图标"
      clearable
      @input="filterIcons"
      class="icon-search"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
    
    <!-- 分页控件移到上方 -->
    <div class="pagination-container">
      <el-pagination
        v-if="filteredIcons.length > pageSize"
        background
        layout="prev, pager, next"
        :total="filteredIcons.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        small
      />
    </div>
    
    <div class="icons-container">
      <el-scrollbar height="260px">
        <div class="icon-grid">
          <div 
            v-for="icon in paginatedIcons" 
            :key="icon.name" 
            class="icon-item" 
            @click="selectIcon(icon.name)"
            :class="{ 'is-selected': modelValue === icon.name }"
          >
            <el-icon>
              <component :is="icon.name" />
            </el-icon>
            <span class="icon-name">{{ icon.name }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'IconPicker',
  components: {
    Search
  },
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const searchKeyword = ref('')
    const icons = ref([])
    const currentPage = ref(1)
    const pageSize = ref(48) // 8行 x 6列 = 每页显示48个图标
    
    // 初始化图标列表
    onMounted(() => {
      icons.value = Object.keys(ElementPlusIconsVue).map(name => ({
        name,
        component: ElementPlusIconsVue[name]
      }))
    })
    
    // 过滤图标
    const filteredIcons = computed(() => {
      if (!searchKeyword.value) {
        return icons.value
      }
      const keyword = searchKeyword.value.toLowerCase()
      return icons.value.filter(icon => 
        icon.name.toLowerCase().includes(keyword)
      )
    })
    
    // 分页显示的图标
    const paginatedIcons = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return filteredIcons.value.slice(start, end)
    })
    
    // 选择图标
    const selectIcon = (iconName) => {
      emit('update:modelValue', iconName)
    }
    
    // 处理页码变化
    const handlePageChange = (page) => {
      currentPage.value = page
      
      // 如果选中的图标不在当前页，自动滚动到包含选中图标的页
      if (props.modelValue) {
        const selectedIconIndex = filteredIcons.value.findIndex(icon => icon.name === props.modelValue)
        if (selectedIconIndex >= 0) {
          const iconPage = Math.floor(selectedIconIndex / pageSize.value) + 1
          if (iconPage !== currentPage.value) {
            currentPage.value = iconPage
          }
        }
      }
    }
    
    // 搜索后重置到第一页
    watch(searchKeyword, () => {
      currentPage.value = 1
    })
    
    // 如果有初始选中的图标，自动定位到对应页
    watch(() => props.modelValue, (newVal) => {
      if (newVal) {
        const selectedIconIndex = filteredIcons.value.findIndex(icon => icon.name === newVal)
        if (selectedIconIndex >= 0) {
          currentPage.value = Math.floor(selectedIconIndex / pageSize.value) + 1
        }
      }
    }, { immediate: true })
    
    // 筛选图标
    const filterIcons = () => {
      // 搜索功能由computed和watch处理
    }
    
    return {
      searchKeyword,
      filteredIcons,
      paginatedIcons,
      currentPage,
      pageSize,
      selectIcon,
      filterIcons,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.icon-picker {
  width: 100%;
}

.icon-search {
  margin-bottom: 8px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 6px;
  padding: 6px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 45px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  padding: 3px 2px;
  border: 1px solid transparent;
}

.icon-item:hover {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
}

.icon-item.is-selected {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.icon-item .el-icon {
  font-size: 16px;
  margin-bottom: 3px;
}

.icon-name {
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  color: #606266;
}

.pagination-container {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
</style> 